<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>手把手教你从0开始搭建个人博客 | Hexo</title>
  <meta name="keywords" content="">
  <meta name="description" content="手把手教你从0开始搭建个人博客 | Hexo">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick">
<meta property="og:type" content="article">
<meta property="og:title" content="Hello World">
<meta property="og:url" content="http://yoursite.com/2020/07/27/hello-world/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-07-27T05:17:47.002Z">
<meta property="article:modified_time" content="2020-07-27T05:17:47.002Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">


<link rel="icon" href="/img/avatar.jpg">

<link href="/css/style.css?v=1.1.0" rel="stylesheet">

<link href="/css/hl_theme/atom-light.css?v=1.1.0" rel="stylesheet">

<link href="//cdn.jsdelivr.net/npm/animate.css@4.1.0/animate.min.css" rel="stylesheet">

<script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="/js/titleTip.js?v=1.1.0" ></script>

<script src="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

<script src="//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>



<script src="//cdn.jsdelivr.net/npm/jquery.cookie@1.4.1/jquery.cookie.min.js" ></script>

<script src="/js/iconfont.js?v=1.1.0" ></script>

<meta name="generator" content="Hexo 4.2.1"></head>
<div style="display: none">
  <input class="theme_disqus_on" value="false">
  <input class="theme_preload_comment" value="">
  <input class="theme_blog_path" value="">
  <input id="theme_shortcut" value="true" />
</div>


<body>
<aside class="nav">
    <div class="nav-left">
        <a href="/" class="avatar_target">
    <img class="avatar" src="/img/avatar.jpg" />
</a>
<div class="author">
    <span>John Doe</span>
</div>

<div class="icon">
    
        
        <a title="rss" href="/atom.xml" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-rss"></use>
                </svg>
            
        </a>
        
    
        
        <a title="github" href="https://github.com/yelog" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-github"></use>
                </svg>
            
        </a>
        
    
        
        <a title="facebook" href="https://www.facebook.com/faker.tops" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-facebook"></use>
                </svg>
            
        </a>
        
    
        
    
        
    
        
        <a title="instagram" href="https://www.facebook.com/faker.tops" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-instagram"></use>
                </svg>
            
        </a>
        
    
        
        <a title="reddit" href="https://www.reddit.com/user/yelog/" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-reddit"></use>
                </svg>
            
        </a>
        
    
        
        <a title="weibo" href="http://weibo.com/u/2307534817" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-weibo"></use>
                </svg>
            
        </a>
        
    
        
        <a title="jianshu" href="https://www.jianshu.com/u/ff56736de7cf" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-jianshu"></use>
                </svg>
            
        </a>
        
    
        
        <a title="zhihu" href="https://www.zhihu.com/people/jaytp/activities" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-zhihu"></use>
                </svg>
            
        </a>
        
    
        
    
        
        <a title="oschina" href="https://my.oschina.net/yelog" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-oschina"></use>
                </svg>
            
        </a>
        
    
        
    
        
        <a title="email" href="mailto:jaytp@qq.com" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-email"></use>
                </svg>
            
        </a>
        
    
        
        <a title="qq" href="http://wpa.qq.com/msgrd?v=3&uin=872336115&site=qq&menu=yes" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-qq"></use>
                </svg>
            
        </a>
        
    
        
        <a title="kugou" href="https://www.kugou.com/" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-kugou"></use>
                </svg>
            
        </a>
        
    
        
        <a title="neteasemusic" href="https://music.163.com/#/user/home?id=88151013" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-neteasemusic"></use>
                </svg>
            
        </a>
        
    
</div>




<ul>
    <li><div class="all active" data-rel="All">All<small>(10)</small></div></li>
    
        
            
            <li><div data-rel="后端">后端<small>(3)</small></div>
                
            </li>
            
        
    
        
            
            <li><div data-rel="Java基础">Java基础<small>(4)</small></div>
                
            </li>
            
        
    
</ul>
<div class="left-bottom">
    <div class="menus">
    
    
    
    
    </div>
    <div><a class="about  hasFriend  site_url"  href="/about">About</a><a style="width: 50%"  class="friends">Friends</a></div>
</div>
<input type="hidden" id="yelog_site_posts_number" value="10">

<div style="display: none">
    <span id="busuanzi_value_site_uv"></span>
    <span id="busuanzi_value_site_pv"></span>
</div>

    </div>
    <div class="nav-right">
        <div class="friends-area">
    <div class="friends-title">
        Links
        <i class="iconfont icon-left"></i>
    </div>
    <div class="friends-content">
        <ul>
            
            <li><a target="_blank" href="http://yelog.org/">叶落阁</a></li>
            
        </ul>
    </div>
</div>
        <div class="title-list">
    <div class="right-top">
        <div id="default-panel">
            <i class="iconfont icon-search" data-title="搜索 快捷键 i"></i>
            <div class="right-title">All</div>
            <i class="iconfont icon-file-tree" data-title="切换到大纲视图 快捷键 w"></i>
        </div>
        <div id="search-panel">
            <i class="iconfont icon-left" data-title="返回"></i>
            <input id="local-search-input" />
            <label class="border-line" for="input"></label>
            <i class="iconfont icon-case-sensitive" data-title="大小写敏感"></i>
            <i class="iconfont icon-tag" data-title="标签"></i>
        </div>
        <div id="outline-panel" style="display: none">
            <div class="right-title">大纲</div>
            <i class="iconfont icon-list" data-title="切换到文章列表"></i>
        </div>
    </div>

    <div class="tags-list">
    <input id="tag-search" />
    <div class="tag-wrapper">
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>Git</a>
            </li>
        
    </div>

</div>

    
    <nav id="title-list-nav">
        
        <a  class="All "
           href="/2020/07/27/%E5%BE%AE%E6%9C%8D%E5%8A%A1%E9%98%B6%E6%AE%B5/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="微服务阶段">微服务阶段</span>
            <span class="post-date" title="2020-07-27 14:31:06">2020/07/27</span>
        </a>
        
        <a  class="All "
           href="/2020/07/27/hello-world/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="Hello World">Hello World</span>
            <span class="post-date" title="2020-07-27 13:17:47">2020/07/27</span>
        </a>
        
        <a  class="All "
           href="/2020/07/23/Java%E5%9F%BA%E7%A1%805/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="Java基础5-">Java基础5-</span>
            <span class="post-date" title="2020-07-23 23:51:18">2020/07/23</span>
        </a>
        
        <a  class="All Java基础 "
           href="/2020/07/21/Java%E5%9F%BA%E7%A1%804-%E8%AF%A6%E8%A7%A3-ThreadPoolExecutor-%E7%9A%84%E5%8F%82%E6%95%B0%E5%90%AB%E4%B9%89%E5%8F%8A%E6%BA%90%E7%A0%81%E6%89%A7%E8%A1%8C%E6%B5%81%E7%A8%8B/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="java基础4-详解 ThreadPoolExecutor 的参数含义及源码执行流程">java基础4-详解 ThreadPoolExecutor 的参数含义及源码执行流程</span>
            <span class="post-date" title="2020-07-21 21:53:39">2020/07/21</span>
        </a>
        
        <a  class="All Java基础 "
           href="/2020/07/20/Java%E5%9F%BA%E7%A1%803-%E7%BA%BF%E7%A8%8B%E7%9A%84%E7%8A%B6%E6%80%81%E6%9C%89%E5%93%AA%E4%BA%9B/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="Java基础3-线程的状态有哪些">Java基础3-线程的状态有哪些</span>
            <span class="post-date" title="2020-07-20 10:21:12">2020/07/20</span>
        </a>
        
        <a  class="All Java基础 "
           href="/2020/07/17/Java%E5%9F%BA%E7%A1%802-HashMap%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="Java基础2-HashMap底层原理">Java基础2-HashMap底层原理</span>
            <span class="post-date" title="2020-07-17 13:02:46">2020/07/17</span>
        </a>
        
        <a  class="All Java基础 "
           href="/2020/07/13/Java%E5%9F%BA%E7%A1%801-Spring%E7%89%B9%E7%82%B9%E6%98%AF%E4%BB%80%E4%B9%88/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="Java基础1-Spring特点是什么">Java基础1-Spring特点是什么</span>
            <span class="post-date" title="2020-07-13 17:24:53">2020/07/13</span>
        </a>
        
        <a  class="All 后端 "
           href="/2020/07/09/%E4%BD%BF%E7%94%A8SSH%E5%AF%86%E9%92%A5%E8%BF%9E%E6%8E%A5Github/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="使用SSH密钥连接Github">使用SSH密钥连接Github</span>
            <span class="post-date" title="2020-07-09 18:13:36">2020/07/09</span>
        </a>
        
        <a  class="All 后端 "
           href="/2020/07/09/%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E4%BB%8E0%E5%BC%80%E5%A7%8B%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="手把手教你从0开始搭建个人博客">手把手教你从0开始搭建个人博客</span>
            <span class="post-date" title="2020-07-09 17:27:06">2020/07/09</span>
        </a>
        
        <a  class="All 后端 "
           href="/2020/07/08/Git%E5%AE%89%E8%A3%85/"
           data-tag="Git"
           data-author="" >
            <span class="post-title" title="Git安装">Git安装</span>
            <span class="post-date" title="2020-07-08 13:04:43">2020/07/08</span>
        </a>
        
        <div id="no-item-tips">

        </div>
    </nav>
    <div id="outline-list">
    </div>
</div>
    </div>
    <div class="hide-list">
        <div class="semicircle" data-title="切换全屏 快捷键 s">
            <div class="brackets first"><</div>
            <div class="brackets">&gt;</div>
        </div>
    </div>
</aside>
<div id="post">
    <div class="pjax">
        <article id="post-手把手教你从0开始搭建个人博客" class="article article-type-post" itemscope itemprop="blogPost">
    
        <h1 class="article-title">手把手教你从0开始搭建个人博客</h1>
    
    <div class="article-meta">
        
        
        
        <span class="book">
            <i class="iconfont icon-category"></i>
            
            <a  data-rel="后端">后端</a>
            
        </span>
        
        
    </div>
    <div class="article-meta">
        
            Created At : <time class="date" title='Updated At: 2020-07-21 21:43:03'>2020-07-09 17:27</time>
        
    </div>
    <div class="article-meta">
        
        
        <span id="busuanzi_container_page_pv">
            Views 👀 :<span id="busuanzi_value_page_pv">
                <span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </span>
        </span>
        
        
    </div>
    
    <div class="toc-ref">
    
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#使用hexo框架搭建blog"><span class="toc-text">使用hexo框架搭建blog</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是-Hexo"><span class="toc-text">什么是 Hexo</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是Github"><span class="toc-text">什么是Github</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#GitHub-主要功能"><span class="toc-text">GitHub 主要功能</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#一、软件准备"><span class="toc-text">一、软件准备</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1、Git安装"><span class="toc-text">1、Git安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2、Node-js"><span class="toc-text">2、Node.js</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#二、安装Hexo"><span class="toc-text">二、安装Hexo</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#检测node安装是否成功"><span class="toc-text">检测node安装是否成功</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-查看node版本"><span class="toc-text">1.查看node版本</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-查看npm版本"><span class="toc-text">2.查看npm版本</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-安装淘宝的cnpm-管理器"><span class="toc-text">3.安装淘宝的cnpm 管理器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-查看cnpm版本"><span class="toc-text">4.查看cnpm版本</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-安装hexo框架"><span class="toc-text">5.安装hexo框架</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-查看hexo版本"><span class="toc-text">6.查看hexo版本</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-创建blog目录"><span class="toc-text">7.创建blog目录</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-进入blog目录"><span class="toc-text">8.进入blog目录</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-生成博客-初始化博客"><span class="toc-text">9.生成博客 初始化博客</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-启动本地博客服务"><span class="toc-text">10.启动本地博客服务</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-本地访问地址-出现这个页面证明搭建成功啦"><span class="toc-text">11.本地访问地址(出现这个页面证明搭建成功啦)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-创建新的文章"><span class="toc-text">12.创建新的文章</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-清理"><span class="toc-text">13.清理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-生成"><span class="toc-text">14.生成</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#三、将网站部署到Github上"><span class="toc-text">三、将网站部署到Github上</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-Github创建一个新的仓库-YourGithubName-github-io"><span class="toc-text">1.Github创建一个新的仓库 YourGithubName.github.io</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-在blog目录下安装git部署插件"><span class="toc-text">2.在blog目录下安装git部署插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-配置-config-yml（不懂这个命令的可以打开blog文件夹下的-config-yml修改一下内容保存即可）"><span class="toc-text">3.配置_config.yml（不懂这个命令的可以打开blog文件夹下的_config.yml修改一下内容保存即可）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-部署到Github仓库里"><span class="toc-text">4.部署到Github仓库里</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-访问这个地址可以查看博客"><span class="toc-text">5.访问这个地址可以查看博客</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#四、更换Blog的主题"><span class="toc-text">四、更换Blog的主题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-下载itmuch主题到本地"><span class="toc-text">1.下载itmuch主题到本地</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-修改hexo根目录下的-config-yml-文件"><span class="toc-text">2.修改hexo根目录下的 _config.yml 文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-清理一下（清除数据库之类）"><span class="toc-text">3.清理一下（清除数据库之类）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-生成静态网站"><span class="toc-text">4.生成静态网站</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-部署到远程Github仓库"><span class="toc-text">5.部署到远程Github仓库</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-查看博客"><span class="toc-text">6.查看博客</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-出现以下界面，表面已实现主题的更改。"><span class="toc-text">7.出现以下界面，表面已实现主题的更改。</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#五、博客图片的存储空间"><span class="toc-text">五、博客图片的存储空间</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#准备工作"><span class="toc-text">准备工作</span></a></li></ol></li></ol>
    
<style>
    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
    .toc-level-3 i,
    .toc-level-3 ol {
        display: none !important;
    }
</style>
</div>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="使用hexo框架搭建blog"><a href="#使用hexo框架搭建blog" class="headerlink" title="使用hexo框架搭建blog"></a><strong>使用hexo框架搭建blog</strong></h1><hr>
<h2 id="什么是-Hexo"><a href="#什么是-Hexo" class="headerlink" title="什么是 Hexo"></a><strong>什么是 Hexo</strong></h2><blockquote>
<ul>
<li>Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</li>
</ul>
</blockquote>
<hr>
<h2 id="什么是Github"><a href="#什么是Github" class="headerlink" title="什么是Github"></a><strong>什么是Github</strong></h2><blockquote>
<ul>
<li>GitHub是通过Git进行版本控制的软件源代码托管服务，由GitHub公司的使用Ruby on Rails编写而成。用户可以免费创建公开的代码仓库，2018年6月4日晚上被微软以75亿美元股票收购。</li>
</ul>
</blockquote>
<blockquote>
<ul>
<li>GitHub 是通过 Git 进行版本控制的软件源代码托管服务，由 GitHub 公司（曾称 Logical Awesome）的开发者 Chris Wanstrath、PJ Hyett 和 Tom Preston-Werner 使用 Ruby on Rails 编写而成。GitHub 同时提供付费账户和免费账户。这两种账户都可以创建公开的代码仓库，但是付费账户还可以创建私有的代码仓库。根据在 2009 年的 Git 用户调查，GitHub 是最流行的 Git 访问站点。除了允许个人和组织创建和访问保管中的代码以外，它也提供了一些方便社会化共同软件开发的功能，即一般人口中的社群功能，包括允许用户追踪其他用户、组织、软件库的动态，对软件代码的改动和 bug 提出评论等。GitHub 也提供了图表功能，用于概观显示开发者们怎样在代码库上工作以及软件的开发活跃程度。</li>
</ul>
</blockquote>
<hr>
<h2 id="GitHub-主要功能"><a href="#GitHub-主要功能" class="headerlink" title="GitHub 主要功能"></a><strong>GitHub 主要功能</strong></h2><blockquote>
<ul>
<li>GitHub 通常用于软件开发。GitHub 还支持以下格式和功能：</li>
</ul>
</blockquote>
<blockquote>
<ul>
<li>文档：包括自动生成的、采用类 Markdown 语言的 README 文件。<br>问题追踪系统（同时可用于功能需求）<br>Wiki<br>GitHub Pages 支持用户通过软件仓库创建静态网站或静态博客（通过一个名为 Jekyll 的软件实现）。<br>任务列表<br>甘特图<br>可视化的地理位置分析<br>预览 3D 渲染文件。预览功能通过 WebGL 和 Three.js 实现。<br>预览 Photoshop 的 PSD 文件，甚至可以比较同一文件的不同版本。<br>使用 GitHub 时，国内的用户经常遇到的问题是访问速度太慢，有时候还会出现无法连接的情况。如果你希望体验 Git 飞一般的速度，可以使用国内的代码托管与开发协作平台 —— Gitee（gitee.com）。除了访问速度更快以外，Gitee 还提供了免费的私有仓库供个人开发者使用。同时，Gitee 也有着国内数一数二的开源生态，这里有非常多的优秀开源项目和开发者，你可以在这里和他们无障碍地沟通交流，不管是找开源项目还是分享自己的开源项目，Gitee 都是极佳的选择。作为国内代码托管平台的佼佼者，目前已经有超过 500 万名开发者在 Gitee 上托管了 1000 余万个代码仓库，而其提供了研发管理、代码托管、文档管理服务的企业版的服务客户也超过了 10 万家。</li>
</ul>
</blockquote>
<hr>
<h1 id="一、软件准备"><a href="#一、软件准备" class="headerlink" title="一、软件准备"></a><strong>一、软件准备</strong></h1><hr>
<h2 id="1、Git安装"><a href="#1、Git安装" class="headerlink" title="1、Git安装"></a><strong>1、Git安装</strong></h2><p><em>Git的详细安装步骤：</em></p>
<ul>
<li><p><a href="https://nate-lin.github.io/2020/07/08/Git%E5%AE%89%E8%A3%85/" target="_blank" rel="noopener">https://nate-lin.github.io/2020/07/08/Git%E5%AE%89%E8%A3%85/</a></p>
</li>
<li><p><a href="https://nate-lin.github.io/2020/07/09/%E4%BD%BF%E7%94%A8SSH%E5%AF%86%E9%92%A5%E8%BF%9E%E6%8E%A5Github/" target="_blank" rel="noopener">https://nate-lin.github.io/2020/07/09/%E4%BD%BF%E7%94%A8SSH%E5%AF%86%E9%92%A5%E8%BF%9E%E6%8E%A5Github/</a></p>
</li>
</ul>
<hr>
<h2 id="2、Node-js"><a href="#2、Node-js" class="headerlink" title="2、Node.js"></a><strong>2、Node.js</strong></h2><p><em>Node的官网：<a href="https://nodejs.org/en/" target="_blank" rel="noopener">https://nodejs.org/en/</a></em></p>
<p><em>Node安装：按照安装过程依次点击即可，安装过程很简单。</em></p>
<p><img src="https://i.loli.net/2020/07/13/ZOaf1W3hswHbtev.png" alt=""></p>
<hr>
<h1 id="二、安装Hexo"><a href="#二、安装Hexo" class="headerlink" title="二、安装Hexo"></a><strong>二、安装Hexo</strong></h1><p><em>下面出现的检测全部是在git中进行的</em></p>
<hr>
<h2 id="检测node安装是否成功"><a href="#检测node安装是否成功" class="headerlink" title="检测node安装是否成功"></a><strong>检测node安装是否成功</strong></h2><hr>
<h2 id="1-查看node版本"><a href="#1-查看node版本" class="headerlink" title="1.查看node版本"></a><strong>1.查看node版本</strong></h2><blockquote>
<ul>
<li>node -v</li>
</ul>
</blockquote>
<p> <em>目的：因刚刚安装了node.js，现查看node的版本，检查是否安装成功，如出现以下情况即安装成功</em></p>
<p><img src="https://i.loli.net/2020/07/13/4KkxQSa5DIcjhPz.png" alt=""></p>
<hr>
<h2 id="2-查看npm版本"><a href="#2-查看npm版本" class="headerlink" title="2.查看npm版本"></a><strong>2.查看npm版本</strong></h2><blockquote>
<ul>
<li>npm -v </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/GJPUqteNuRmI5Xs.png" alt=""></p>
<hr>
<h2 id="3-安装淘宝的cnpm-管理器"><a href="#3-安装淘宝的cnpm-管理器" class="headerlink" title="3.安装淘宝的cnpm 管理器"></a><strong>3.安装淘宝的cnpm 管理器</strong></h2><p><em>安装过程需要点时间，请耐心等待，如出现错误，再安装即可</em></p>
<blockquote>
<ul>
<li>npm install -g cnpm –registry=<a href="http://registry.npm.taobao.org" target="_blank" rel="noopener">http://registry.npm.taobao.org</a> </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/MrVOI3jLpPAdfZa.png" alt=""></p>
<hr>
<h2 id="4-查看cnpm版本"><a href="#4-查看cnpm版本" class="headerlink" title="4.查看cnpm版本"></a><strong>4.查看cnpm版本</strong></h2><blockquote>
<ul>
<li>cnpm -v</li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/rDanIE3fAY5FPx2.png" alt=""></p>
<hr>
<h2 id="5-安装hexo框架"><a href="#5-安装hexo框架" class="headerlink" title="5.安装hexo框架"></a><strong>5.安装hexo框架</strong></h2><p><em>全局安装hexo博客</em></p>
<blockquote>
<ul>
<li>cnpm install -g hexo-cli </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/ZMKEtexsIPBjW4p.png" alt=""></p>
<hr>
<h2 id="6-查看hexo版本"><a href="#6-查看hexo版本" class="headerlink" title="6.查看hexo版本"></a><strong>6.查看hexo版本</strong></h2><blockquote>
<ul>
<li>hexo -v</li>
</ul>
</blockquote>
<p><em>验证</em></p>
<p><img src="https://i.loli.net/2020/07/13/e4xXGNJFQPtgzUI.png" alt=""></p>
<hr>
<h2 id="7-创建blog目录"><a href="#7-创建blog目录" class="headerlink" title="7.创建blog目录"></a><strong>7.创建blog目录</strong></h2><p><em>博客的东西全部在blog目录下，如安装过程中出现什么问题，可把blog删掉后重来即可</em></p>
<blockquote>
<ul>
<li>mkdir blog </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/BqrpJXVwyFiKERI.png" alt=""></p>
<hr>
<h2 id="8-进入blog目录"><a href="#8-进入blog目录" class="headerlink" title="8.进入blog目录"></a><strong>8.进入blog目录</strong></h2><blockquote>
<ul>
<li>cd blog </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/nbRCm267tdsZHpF.png" alt=""></p>
<hr>
<h2 id="9-生成博客-初始化博客"><a href="#9-生成博客-初始化博客" class="headerlink" title="9.生成博客 初始化博客"></a><strong>9.生成博客 初始化博客</strong></h2><blockquote>
<ul>
<li>hexo init</li>
</ul>
</blockquote>
<p><em>过程需要点时间，请耐心等待，出现以下即安装完成</em></p>
<p><img src="https://i.loli.net/2020/07/13/rydPpcMFv1hisUQ.png" alt=""></p>
<hr>
<h2 id="10-启动本地博客服务"><a href="#10-启动本地博客服务" class="headerlink" title="10.启动本地博客服务"></a><strong>10.启动本地博客服务</strong></h2><blockquote>
<ul>
<li>hexo s </li>
</ul>
</blockquote>
<p><em>需要关闭则使用Ctrl+C下即可</em></p>
<p><img src="https://i.loli.net/2020/07/13/dTt9nWRULA5wV1b.png" alt=""></p>
<hr>
<h2 id="11-本地访问地址-出现这个页面证明搭建成功啦"><a href="#11-本地访问地址-出现这个页面证明搭建成功啦" class="headerlink" title="11.本地访问地址(出现这个页面证明搭建成功啦)"></a><strong>11.本地访问地址(出现这个页面证明搭建成功啦)</strong></h2><p><em>去浏览器输入以下地址即可查看新创的博客（会自动默认给你新创一篇文章，题目为Hello World）</em></p>
<blockquote>
<ul>
<li><a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000/</a> </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/ndlbvRKEXskqLTw.png" alt=""></p>
<hr>
<h2 id="12-创建新的文章"><a href="#12-创建新的文章" class="headerlink" title="12.创建新的文章"></a><strong>12.创建新的文章</strong></h2><blockquote>
<ul>
<li>hexo n “我的第一篇文章” </li>
</ul>
</blockquote>
<p><em>文章名称：我的第一篇文章</em></p>
<p><img src="https://i.loli.net/2020/07/13/U1N3P4GrmTLBE5Q.png" alt=""></p>
<hr>
<h2 id="13-清理"><a href="#13-清理" class="headerlink" title="13.清理"></a><strong>13.清理</strong></h2><blockquote>
<ul>
<li>hexo clean </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/reEAshDCYlTW9M2.png" alt=""></p>
<hr>
<h2 id="14-生成"><a href="#14-生成" class="headerlink" title="14.生成"></a><strong>14.生成</strong></h2><blockquote>
<ul>
<li>hexo g </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/1Mt6oq95HITJxpW.png" alt=""></p>
<hr>
<h1 id="三、将网站部署到Github上"><a href="#三、将网站部署到Github上" class="headerlink" title="三、将网站部署到Github上"></a><strong>三、将网站部署到Github上</strong></h1><p><em>以后通过github访问我们的个人博客，接下来教你如何将自己的博客部署到github上公开使用</em></p>
<hr>
<h2 id="1-Github创建一个新的仓库-YourGithubName-github-io"><a href="#1-Github创建一个新的仓库-YourGithubName-github-io" class="headerlink" title="1.Github创建一个新的仓库 YourGithubName.github.io"></a><strong>1.Github创建一个新的仓库 YourGithubName.github.io</strong></h2><p><em>注册账号成功后登录进去，点击头像旁边的+号再点击New repository即可输入你的地址：昵称+github.io,后续输入地址即可访问（用户部署个人博客的github仓库的命名必须符合特定要求才行）</em></p>
<ul>
<li>Github官网：<a href="https://github.com/" target="_blank" rel="noopener">https://github.com/</a>  </li>
</ul>
<p><img src="https://i.loli.net/2020/07/13/JaqomsAcS2i1GHV.png" alt=""></p>
<p><img src="https://i.loli.net/2020/07/13/avdxFGB7APHionN.png" alt=""></p>
<hr>
<h2 id="2-在blog目录下安装git部署插件"><a href="#2-在blog目录下安装git部署插件" class="headerlink" title="2.在blog目录下安装git部署插件"></a><strong>2.在blog目录下安装git部署插件</strong></h2><blockquote>
<ul>
<li>cnpm install –save hexo-deployer-git </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/9VPChl2IwFJkcNv.png" alt=""></p>
<hr>
<h2 id="3-配置-config-yml（不懂这个命令的可以打开blog文件夹下的-config-yml修改一下内容保存即可）"><a href="#3-配置-config-yml（不懂这个命令的可以打开blog文件夹下的-config-yml修改一下内容保存即可）" class="headerlink" title="3.配置_config.yml（不懂这个命令的可以打开blog文件夹下的_config.yml修改一下内容保存即可）"></a><strong>3.配置_config.yml（不懂这个命令的可以打开blog文件夹下的_config.yml修改一下内容保存即可）</strong></h2><blockquote>
<ul>
<li>vim _config.yml</li>
</ul>
</blockquote>
<p><em>找到这部分代码，（原始的是没有repo，和branch的，而且type后面也没有东西）</em></p>
<p><em>对这段代码进行更改</em></p>
<p><em>type    一个名字，建议写成git方便识别</em></p>
<p><em>repo    repository仓库地址   将刚刚新建的github仓库地址复制到这里就可以了</em></p>
<p><em>branch  分支这里设置管理员  master</em></p>
<p><em>更改以后进行保存</em></p>
<blockquote>
<ul>
<li>deploy:</li>
</ul>
</blockquote>
<blockquote>
<ul>
<li>type: git</li>
</ul>
</blockquote>
<blockquote>
<ul>
<li>repo: <a href="https://github.com/YourGithubName/YourGithubName.github.io.git" target="_blank" rel="noopener">https://github.com/YourGithubName/YourGithubName.github.io.git</a></li>
</ul>
</blockquote>
<blockquote>
<ul>
<li>branch: master</li>
</ul>
</blockquote>
<p><em>去刚刚新创仓库的地址copy，黏贴到repo即可</em></p>
<hr>
<h2 id="4-部署到Github仓库里"><a href="#4-部署到Github仓库里" class="headerlink" title="4.部署到Github仓库里"></a><strong>4.部署到Github仓库里</strong></h2><p><em>这是会叫你输入github的账号和密码，按要求输入即可</em></p>
<blockquote>
<ul>
<li>hexo d </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/CSRVOPeMkvEz8Jt.png" alt=""></p>
<hr>
<h2 id="5-访问这个地址可以查看博客"><a href="#5-访问这个地址可以查看博客" class="headerlink" title="5.访问这个地址可以查看博客"></a><strong>5.访问这个地址可以查看博客</strong></h2><p><em>将本地文件部署到github新建的仓库中,然后通过访问 <strong>https://+自己的仓库名</strong> 就可以访问部署到github上的blog了，如页面出不来，多刷新几次即可</em></p>
<p><em>（如https:// nate-lin.github.io/）</em></p>
<blockquote>
<ul>
<li><a href="https://YourGithubName.github.io/" target="_blank" rel="noopener">https://YourGithubName.github.io/</a> </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/dtIOvScp8ahXNQn.png" alt=""></p>
<hr>
<h1 id="四、更换Blog的主题"><a href="#四、更换Blog的主题" class="headerlink" title="四、更换Blog的主题"></a><strong>四、更换Blog的主题</strong></h1><p><em>系统生成的主题我们看着不太喜欢，可以更换自己喜欢的主题，下面我以itmuch主题为主，也可以更换自己想更换的主题，操作都是一样的</em></p>
<hr>
<h2 id="1-下载itmuch主题到本地"><a href="#1-下载itmuch主题到本地" class="headerlink" title="1.下载itmuch主题到本地"></a><strong>1.下载itmuch主题到本地</strong></h2><p><em>blog文件会产生一个itmuch的的文件夹即为主题的存放位置</em></p>
<blockquote>
<ul>
<li>git clone <a href="https://github.com/itmuch/hexo-theme-itmuch.git" target="_blank" rel="noopener">https://github.com/itmuch/hexo-theme-itmuch.git</a> themes/itmuch </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/cfIVjYmKiQBxOoC.png" alt=""></p>
<p><img src="https://i.loli.net/2020/07/13/8cfWX3wjltkx4od.png" alt=""></p>
<hr>
<h2 id="2-修改hexo根目录下的-config-yml-文件"><a href="#2-修改hexo根目录下的-config-yml-文件" class="headerlink" title="2.修改hexo根目录下的 _config.yml 文件"></a><strong>2.修改hexo根目录下的 _config.yml 文件</strong></h2><p><em>找到Blog文件中的_config.yml文件，使用编译器打开，建议使用   Visual Studio Code打开，找到这部分代码（即theme）<br>将冒号后面的内容改为刚刚新建的itmuch</em></p>
<blockquote>
<ul>
<li>theme: itmuch</li>
</ul>
</blockquote>
<hr>
<h2 id="3-清理一下（清除数据库之类）"><a href="#3-清理一下（清除数据库之类）" class="headerlink" title="3.清理一下（清除数据库之类）"></a><strong>3.清理一下（清除数据库之类）</strong></h2><blockquote>
<ul>
<li>hexo c </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/bk1aWpvVYQhlPod.png" alt=""></p>
<hr>
<h2 id="4-生成静态网站"><a href="#4-生成静态网站" class="headerlink" title="4.生成静态网站"></a><strong>4.生成静态网站</strong></h2><blockquote>
<ul>
<li>hexo g </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/nSqIPZzU2ofkLrY.png" alt=""></p>
<hr>
<h2 id="5-部署到远程Github仓库"><a href="#5-部署到远程Github仓库" class="headerlink" title="5.部署到远程Github仓库"></a><strong>5.部署到远程Github仓库</strong></h2><blockquote>
<ul>
<li>hexo d </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/CSRVOPeMkvEz8Jt.png" alt=""></p>
<hr>
<h2 id="6-查看博客"><a href="#6-查看博客" class="headerlink" title="6.查看博客"></a><strong>6.查看博客</strong></h2><blockquote>
<ul>
<li>localhost:4000/</li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/9CMNYy6AIwUgpO8.png" alt=""></p>
<hr>
<h2 id="7-出现以下界面，表面已实现主题的更改。"><a href="#7-出现以下界面，表面已实现主题的更改。" class="headerlink" title="7.出现以下界面，表面已实现主题的更改。"></a><strong>7.出现以下界面，表面已实现主题的更改。</strong></h2><p><em>多刷新几次即可</em></p>
<blockquote>
<ul>
<li><a href="https://YourGithubName.github.io/" target="_blank" rel="noopener">https://YourGithubName.github.io/</a> </li>
</ul>
</blockquote>
<p><img src="https://i.loli.net/2020/07/13/fHQlhcP92qmyeFs.png" alt=""></p>
<hr>
<h1 id="五、博客图片的存储空间"><a href="#五、博客图片的存储空间" class="headerlink" title="五、博客图片的存储空间"></a><strong>五、博客图片的存储空间</strong></h1><hr>
<h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a><strong>准备工作</strong></h2><ul>
<li><p>方法一：注册一个“sm.ms”账号,网址： <em><a href="https://sm.ms/" target="_blank" rel="noopener">https://sm.ms/</a></em></p>
</li>
<li><p>注册成功后进行登录，即可上传。</p>
</li>
</ul>
<hr>
<ul>
<li><p>方法二：注册一个“七牛云”账号，网址： <em><a href="https://portal.qiniu.com/signup" target="_blank" rel="noopener">https://portal.qiniu.com/signup</a></em></p>
</li>
<li><p>注册成功后进行登录，点击下图的步骤：</p>
</li>
</ul>
<p><img src="https://i.loli.net/2020/07/13/86EQxXgOudwM4Yt.png" alt=""></p>
<p><img src="https://i.loli.net/2020/07/13/OlSY6oKHVG8PLMm.png" alt=""></p>
<p><img src="https://i.loli.net/2020/07/13/UOdTXnh1lIEGZMy.png" alt=""></p>
<p><strong>总结：首先需要环境准备（Git、node）使用它们装hexo,后使用hexo的命令部署到github上去，更换自己喜欢的主题、利用千牛云存放图片、博客利用千牛云的链接进行访问，过程中会遇到各种各样的问题，耐心操作即可，过程不复杂，一步步按步骤来即可。后期可以自行更改克隆下主题的照片和超链接，我们现先把博客搭建成功，后期的有时间再慢慢完善。</strong></p>

      
       <hr><span style="font-style: italic;color: gray;"> 转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com </span>
    </div>
</article>


<p>
    <a  class="dashang" onclick="dashangToggle()">💰</a>
</p>






    




    </div>
    <div class="copyright">
        <p class="footer-entry">
    ©2016-2020 Yelog
</p>
<p class="footer-entry">Built with <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/yelog/hexo-theme-3-hexo" target="_blank">3-hexo</a> theme</p>

    </div>
    <div class="full-toc">
        <button class="full" data-title="切换全屏 快捷键 s"><span class="min "></span></button>
<a class="" id="rocket" ></a>

    </div>
</div>

<div class="hide_box" onclick="dashangToggle()"></div>
<div class="shang_box">
    <a class="shang_close"  onclick="dashangToggle()">×</a>
    <div class="shang_tit">
        <p>Help us with donation</p>
    </div>
    <div class="shang_payimg">
        <div class="pay_img">
            <img src="/img/alipay.jpg" class="alipay" title="扫码支持">
            <img src="/img/weixin.jpg" class="weixin" title="扫码支持">
        </div>
    </div>
    <div class="shang_payselect">
        <span><label><input type="radio" name="pay" checked value="alipay">alipay</label></span><span><label><input type="radio" name="pay" value="weixin">weixin</label></span>
    </div>
</div>


</body>
<script src="/js/jquery.pjax.js?v=1.1.0" ></script>

<script src="/js/script.js?v=1.1.0" ></script>
<script>
    var img_resize = 'default';
    function initArticle() {
        /*渲染对应的表格样式*/
        
            $("#post .pjax table").addClass("green_title");
        

        /*渲染打赏样式*/
        
        $("input[name=pay]").on("click", function () {
            if($("input[name=pay]:checked").val()=="weixin"){
                $(".shang_box .shang_payimg .pay_img").addClass("weixin_img");
            } else {
                $(".shang_box .shang_payimg .pay_img").removeClass("weixin_img");
            }
        })
        

        /*高亮代码块行号*/
        

        /*访问数量*/
        
        $.getScript("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");
        

        /*代码高亮，行号对齐*/
        $('.pre-numbering').css('line-height',$('.has-numbering').css('line-height'));

        
        
    }

    /*打赏页面隐藏与展示*/
    
    function dashangToggle() {
        $(".shang_box").fadeToggle();
        $(".hide_box").fadeToggle();
    }
    

</script>

<!--加入行号的高亮代码块样式-->

<!--自定义样式设置-->
<style>
    
    
    .nav {
        width: 542px;
    }
    .nav.fullscreen {
        margin-left: -542px;
    }
    .nav-left {
        width: 120px;
    }
    
    
    @media screen and (max-width: 1468px) {
        .nav {
            width: 492px;
        }
        .nav.fullscreen {
            margin-left: -492px;
        }
        .nav-left {
            width: 100px;
        }
    }
    
    
    @media screen and (max-width: 1024px) {
        .nav {
            width: 492px;
            margin-left: -492px
        }
        .nav.fullscreen {
            margin-left: 0;
        }
    }
    
    @media screen and (max-width: 426px) {
        .nav {
            width: 100%;
        }
        .nav-left {
            width: 100%;
        }
    }
    
    
    .nav-right .title-list nav a .post-title, .nav-right .title-list #local-search-result a .post-title {
        color: #383636;
    }
    
    
    .nav-right .title-list nav a .post-date, .nav-right .title-list #local-search-result a .post-date {
        color: #5e5e5f;
    }
    
    
    .nav-right nav a.hover, #local-search-result a.hover{
        background-color: #e2e0e0;
    }
    
    

    /*列表样式*/
    

    /* 背景图样式 */
    
    


    /*引用块样式*/
    

    /*文章列表背景图*/
    

    
</style>







</html>
